<template>
  <li v-if="menuList.children && menuList.children.length > 0" class="treeview">
    <a>
      <span>{{menuList.title}}</span>
      <i class="fa fa-angle-left pull-right"></i>
    </a>
    <ul class="treeview-menu">
      <menu-list v-for="item of menuList.children" :menuList="item" :key="item.key" />
    </ul>
  </li>
  <router-link v-else tag="li" :to="menuList.key">
    <a>
      <span>{{menuList.title}}</span>
    </a>
  </router-link>
  <!-- <ul class="sidebar-menu">
    <li class="header">HEADER</li>
    <li class="active"><a href="#"><span>Link</span></a><</li>
    <li><a href="#"><span>Another Link</span></a></li>
    <li class="treeview">
      <a href="#"><span>Multilevel</span> <i class="fa fa-angle-left pull-right"></i></a>
      <ul class="treeview-menu">
        <li><a href="#">Link in level 2</a></li>
        <li><a href="#">Link in level 2</a></li>
      </ul>
    </li>
  </ul> -->
</template>

<script>
export default {
  name: 'MenuList',
  props: {
    menuList: Object
  }
}
</script>

<style lang="less" scoped>

</style>
